<!-- 角色=> 企业  -- 征信报告 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei" title="评级结果">
      <template #buttons>
        <el-button type="primary" @click="applyVisible = true"> 获取结果 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="showEcharts(row)"> 查看结果 </el-button>
            <el-button type="primary" size="small" text @click="showDetail(row)" :disabled="row.status == 2"> 结果应用
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <ReDialog :width="550" :height="250" :models="applyVisible" @Closes="applyVisible = false">
      <template #header>
        <h2 style="text-align: center;">获取评级结果应用</h2>
      </template>
      <template #main>
        <el-form :model="formData" label-width="100px" label-position="right" style="width: 80%; margin: 0 auto">
          <el-form-item label="模型名称" prop="url">
            <el-select v-model="formData.id" @change="selectId()">
              <el-option v-for="type in selectData" :key="type.internalRatingModelId" :label="type.userModelName
              " :value="type.internalRatingModelId" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户类型">
            <el-select v-model="formData.type" disabled>
              <el-option label="公司客户" value="公司客户" />
              <el-option label="零售客户" value="零售客户" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addList()" :loading="BtnLoading" type="primary">确定</el-button>
          <el-button @click="applyVisible = false"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>


    <ReDialog :width="1200" :height="600" :models="chartVisible" @Closes="chartVisible = false">
      <template #header>
        <h2 style="text-align: center;">评级结果详情</h2>
      </template>
      <template #main>
        <el-scrollbar height="500px">
          <div class="datain_main_box">
            <p class="_main_box_title">数据可视化</p>
          </div>
          <div id="container" v-if="chartVisible" style="width:500px;height: 300px;position:relative">
            <div class="rightText">
              <h4 style="text-align: start;">{{ showText.tittle }} &nbsp;&nbsp;{{ showText.tittle1 }}</h4>
              <div>{{ showText.content }}</div>
            </div>
          </div>
          <div class="datain_main_box">
            <p class="_main_box_title">客户信息</p>
          </div>
          <PureTableBar class="list_hei">
            <template v-slot="{ size, checkList }">
              <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small"
                :data="infoList" :columns="showCustomType ? columns3 : columns2" :checkList="checkList"
                :pagination="pagination1" max-height="520" :header-cell-style="{
                  background: 'var(--el-table-row-hover-bg-color)',
                  color: 'var(--el-text-color-primary)'
                }" @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
              </pure-table>
            </template>
          </PureTableBar>
        </el-scrollbar>
      </template>
    </ReDialog>
    <!-- 评级应用结果 -->

    <ReDialog :width="800" :height="200" :models="resultVisible" @Closes="cancelResult">
      <template #header>
        <h2 style="text-align: center;">评级结果应用</h2>
      </template>
      <template #main>
        <el-form :model="formData" label-width="100px" label-position="right" style="width: 80%; margin: 0 auto">
          <el-form-item label="选择结果应用">
            <el-checkbox-group v-model="applyCheck">
              <el-checkbox v-for="(t) in selectApplyList" :key="t.value" :label="t.value">{{
                t.label
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addApply()" :loading="BtnLoading" type="primary">应用</el-button>
          <el-button @click="cancelResult"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>
  </div>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useGradeResult } from "./hook/gradeResult";
import { ref, reactive, nextTick, watch } from "vue";
const {
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  handleCurrentChange,
  handleSizeChange,
  formData,
  selectData,
  applyVisible,
  addList,
  showEcharts,
  selectId,
  chartVisible,
  chartList,
  BtnLoading,
  infoList,
  pagination1,
  columns2,
  handleCurrentChange2,
  handleSizeChange2,
  resultVisible,
  applyCheck,
  showDetail,
  selectApplyList,
  addApply,
  showText,
  columns3,
  showCustomType,
  cancelResult
} = useGradeResult()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

.datain_main_box {
  ._main_box_title {
    width: 100%;
    line-height: 36px;
    height: 36px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 3px solid #2b65a7;
    background-color: #efefee;
    margin: 10px 0;
  }
}

.rightText {
  position: absolute;
  top: 20%;
  left: 138%;
  width: 70%;
  font-size: 14px;
}
</style>
